<template>
  <div>
    <el-input
      v-bind="{ ...item }"
      v-model="changeSelectValue"
      readonly="readonly"
      suffix-icon="ele-ArrowDown"
      @click="onClick"
    ></el-input>
    <van-popup
      round
      closeable
      lazy-render
      v-model:show="showPicker"
      position="bottom"
    >
      <div>
        <div class="title">
          <b>{{ item?.placeholder || "请选择" }}</b>
        </div>
        <div class="search">
          <el-input
            v-model="searchVal"
            placeholder="请输入名称搜索选项"
            @input="handleSearchInput"
          />
        </div>
        <div class="select-body">
          <dl class="select-option">
            <template
              v-for="option in mobileOptions"
              :key="option?.value"
            >
              <dd
                v-if="!isHideQuota(option) && isShowOption(`${props.item?.vModel}_${option.value}`)"
                class="select-option-item"
                :class="value == option?.value ? 'select-option-item-checked' : ''"
                @click="onConfirm(option?.value)"
              >
                <i></i>
                <span v-if="getSurplusQuota(option) <= 0 && item?.config?.quotaBlankWarning">
                  {{ item.config.quotaBlankWarning }}
                </span>
                <span
                  v-else
                  class="ml2"
                  v-html="option.label"
                ></span>
                <span
                  class="text-muted"
                  v-if="showQuota(option)"
                >
                  ({{ $t("formgen.radio.remaining") }}{{ getSurplusQuota(option) }})
                </span>
              </dd>
            </template>
          </dl>
          <div v-if="!mobileOptions || !mobileOptions.length">
            <div class="no-data">
              <p>暂无数据</p>
            </div>
          </div>
        </div>
      </div>
    </van-popup>
  </div>
</template>

<script setup lang="ts" name="MobileTSelect">
import { formItemProps } from "@/views/formgen/components/FormItem/hooks/useFormItemHook";
import { computed, onMounted, ref } from "vue";
import { selectEmits, useSelect } from "@/views/formgen/components/FormItem/TSelect/useSelect";
import { useOptionQuota } from "@/views/formgen/components/FormItem/hooks/useOptionQuotaHook";

const props = defineProps({
  ...formItemProps
});

const emits = defineEmits(selectEmits);

const { changeValue, handleChange, getOptions, isShowOption } = useSelect(props, emits);
const optionQuotaHook = useOptionQuota(props);

const { isHideQuota, getSurplusQuota, showQuota } = optionQuotaHook;
const searchVal = ref("");
const showPicker = ref(false);
const mobileOptions = ref<any>([]);

const changeSelectValue = computed(() => {
  const options = getOptions();
  const value = options.find((e: any) => e.value === props.value);
  if (value) {
    return value.label;
  }
  return "";
});

const handleSearchInput = () => {
  mobileOptions.value = queryOptions(searchVal.value);
};

const queryOptions = (val: string) => {
  const options = getOptions();
  if (!val) {
    return getOptions();
  }
  return options.filter((e: any) => e.label.indexOf(val) > -1) || [];
};

const onClick = () => {
  mobileOptions.value = getOptions();
  showPicker.value = true;
};

const onConfirm = (value: any) => {
  showPicker.value = false;
  changeValue.value = value;
  handleChange(value);
};

onMounted(() => {
  mobileOptions.value = getOptions();
});
</script>

<style lang="scss" scoped>
.title {
  max-width: 80%;
  font-size: 16px;
  margin-top: 8px;
  margin-left: 16px;
  margin-bottom: 10px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.search {
  padding: 2px 5px;
}

.no-data {
  text-align: center;
  padding: 10px 0;
  margin: auto;
  color: #999;
}

.select-body {
  height: 44vh;
  overflow: hidden;
  overflow-y: auto;
  font-size: 16px;

  .select-option {
    padding-bottom: 30px;
  }

  .select-option-item {
    padding: 5px 18px;
    display: flex;
    align-items: center;

    i {
      background-color: #eff1f4;
      border-radius: 100%;
      box-sizing: border-box;
      cursor: pointer;
      display: block;
      height: 18px;
      overflow: hidden;
      position: relative;
      width: 18px;
    }

    div {
      flex: 1;
      overflow: hidden;
      line-height: 22px;
      padding-left: 10px;
    }
  }

  .select-option-item-checked {
    i {
      border: 5px solid var(--form-theme-color);
    }
  }
}
</style>
